<script lang="ts" setup>
import { computed, defineAsyncComponent } from 'vue'
import { TermStatus, PointType } from '@/types/enum'
import { useRouter } from 'vue-router'
import { queryBikeProductTableCol } from '@/api/term/types/term'
import { useMapPoint } from '@/store/modules/mapPoint'
defineProps<{
  data: queryBikeProductTableCol[]
  page: 'operatorsinfo' | 'bikelongtermlist'
  loading: boolean
}>()
const changeStatus = computed(() => {
  return (type: TermStatus) => {
    switch (type) {
      case '1':
        return '上架中'
      case '0':
        return '已下架'
      default:
        break
    }
  }
})

/**
 * 查看所属门店 弹出框
 */
const StoreInfo = defineAsyncComponent(() => import('@/components/popover/StoreInfo.vue'))
const operatorsInfo = (row: queryBikeProductTableCol) => {
  router.push({
    name: 'OperatorsInfo',
    query: {
      merchantId: row.storeInfo?.merchantId,
      storeId: row.storeInfo?.storeId
    }
  })
}
/**
 * 查看更多信息
 */
const emits = defineEmits(['show'])
/**
 * 跳转取还车点地图
 */
const router = useRouter()
const { setType, setText, setReturnAddress, setBindAddress } = useMapPoint()
const pointAMap = (
  type: PointType,
  text: '查看取车点' | '查看还车点',
  row: queryBikeProductTableCol
) => {
  setType(type)
  setText(text)
  setReturnAddress(row.returnAddress)
  setBindAddress(row.bindAddress)
  router.push({
    name: 'ShowPointAMap',
    query: {
      name: row.name
    }
  })
}
</script>

<template>
  <el-table :data="data" v-loading="loading" class="no-border">
    <el-table-column prop="name" label="套餐名称" min-width="160" align="center" />
    <el-table-column prop="productModel" label="车辆型号" align="center" />
    <el-table-column prop="tags" label="车辆标签" min-width="200" align="center">
      <template #default="scope">
        {{ scope.row.tags.split('|').join(',') }}
      </template>
    </el-table-column>
    <el-table-column prop="rentTime" label="可租周期" min-width="200" align="center" />
    <el-table-column label="套餐状态" align="center">
      <template #default="scope">
        <span
          :style="{
            color:
              scope.row.status == '1' ? 'var(--xy-success-color)' : 'var(--xy-normal-text-color)'
          }"
          >{{ changeStatus(scope.row.status) }}</span
        >
      </template>
    </el-table-column>
    <el-table-column label="所属门店" v-if="page !== 'operatorsinfo'" align="center">
      <template #default="scope">
        <el-popover
          v-if="scope.row.storeInfo"
          trigger="hover"
          popper-class="store-info_popover"
          width="210px"
        >
          <store-info :data="scope.row.storeInfo" :is-divider="true">
            <template #button>
              <el-button plain link w-full @click="operatorsInfo(scope.row)">进入门店 ></el-button>
            </template>
          </store-info>
          <template #reference>
            <el-button link class="is-show" type="primary">查看</el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="还/取车点" fixed="right" align="center">
      <template #default="scope">
        <el-button
          v-if="scope.row.bindAddress"
          type="primary"
          link
          class="is-show"
          @click="pointAMap('take', '查看还车点', scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="更多信息" fixed="right" align="center">
      <template #default="scope">
        <el-button type="primary" class="is-open" link @click="emits('show', scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.package-info_popover,
.store-info_popover {
  padding: 0px;
}
</style>
